import React,{useCallback,useState} from 'react'
import { ProWrapper} from './styledPro'
import Navbar from '@/components/Navbar/Navbar'
import line from '@/assets/images/line.png'
import left from '@/assets/images/left.png'
import cate from '@/assets/images/cate.png'
import talk from '@/assets/images/talk.png'
import card from '@/assets/images/card.png'
import list from '@/assets/images/list.png'
import logo from '@/assets/images/logo.jpg'
import {useHistory} from 'react-router-dom'

export default function ProtectContainer() {
    const [isShow,setIsShow]=useState(false)
    const history=useHistory()
    const handleBackClick=useCallback(
        (num)=>{
            return()=>{
                if(num===1){
                    history.goBack()
                }else{
                    setIsShow(!isShow)
                }
            }   
        }
    )
    return (
        <ProWrapper isShow={isShow?'1':'0'}>
        <Navbar
            color='#F8F8F8'
        >
        </Navbar>
            <div className='top'>
                <ul className='nav'
                >
                    <li onClick={handleBackClick(1)}><img src={left} alt="" /></li>
                    <li><img src={line} alt="" /></li>
                    <li onClick={handleBackClick(3)}><img src={cate} alt="" /></li>
                </ul>
            </div>
            <div className="tip">
                <div className="tip-trangle-top"></div>
                <ul>
                    <li><img src={list} alt="" /> 我的订单</li>
                    <li><img src={card} alt="" /> 洗护优惠券</li>
                    <li><img src={talk} alt="" /> 我的客服</li>
                </ul>
            </div>
            <div className='logo'>
                <img src={logo} alt="" />
            </div>
            <div className='wash'>
                <div className='left'>
                    <h1>手工球鞋洗护</h1>
                    <p>
                        ￥<span className='price'>59</span>/双 
                        <span className='xs'>限时包邮</span>
                    </p>
                    <ul>
                        <li>12道严苛工序</li>
                        <li>1全程可追溯</li>
                    </ul>
                    <span className='towash'>立即清洗</span>
                </div>
                <div className='right'>
                    <div className='up'>
                        <div className='wash_top'>
                            <h1>大黄靴</h1>
                            <p>专洗</p>
                            <p className=''>￥<span className='rig_pri'>69</span>/双</p>
                        </div>
                        <div className='wash_top2'>
                            <h1>YEEZE350</h1>
                            <p>专洗</p>
                            <p>￥<span className='rig_pri'>69</span>/双</p>
                        </div> 
                    </div>
                    <div className='bottom'>
                        <h1>奢包护理</h1>
                        <p>￥<span className='rig_pri'>199</span>/件</p>
                    </div>
                </div>
            </div>
            <div className='num'>
                <p>累计清洗 <span>419,425</span>件
                </p>
            </div>
            <div className='ser'>
                <h1>增值服务 <span>更多</span> </h1>
                <ul>
                    <li>
                        <h3>光面皮补伤</h3>
                        <p><span>￥199</span>起</p>
                    </li>
                    <li>
                        <h3>氧化修复</h3>
                        <p><span>￥199</span>起</p>

                    </li>
                    <li>
                        <h3>黏胶修复</h3>
                        <p><span>￥199</span>起</p>

                    </li>
                </ul>
            </div>
            <div className='compare'>
                <h1>洗护前后对比</h1>
            </div>
        </ProWrapper>
    )
}
